/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use 'sass:math';

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../container/shared' as container;
@use './motion';

@mixin card-style {
  border-start-start-radius: awsui.$border-radius-container;
  border-start-end-radius: awsui.$border-radius-container;
  border-end-start-radius: awsui.$border-radius-container;
  border-end-end-radius: awsui.$border-radius-container;
  box-sizing: border-box;

  &::before {
    @include styles.base-pseudo-element;
    // Reset border color to prevent it from flashing black during card selection animation
    border-color: transparent;
    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
    border-start-start-radius: awsui.$border-radius-container;
    border-start-end-radius: awsui.$border-radius-container;
    border-end-start-radius: awsui.$border-radius-container;
    border-end-end-radius: awsui.$border-radius-container;
    z-index: 1;
  }

  &::after {
    @include styles.base-pseudo-element;
    border-start-start-radius: awsui.$border-radius-container;
    border-start-end-radius: awsui.$border-radius-container;
    border-end-start-radius: awsui.$border-radius-container;
    border-end-end-radius: awsui.$border-radius-container;
  }
  &:not(.refresh)::after {
    box-shadow: awsui.$shadow-container;
  }
  &.refresh::after {
    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
  }
}

.root {
  @include styles.styles-reset();
  @include styles.default-text-style;
}

.header {
  &-variant-full-page.header-refresh {
    padding-block-start: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-block-end: calc(
      #{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom}
    );
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  // reset styles from OL
  padding-block: 0;
  padding-inline: 0;
  list-style: none;
  margin-block: 0;
  margin-inline-start: calc(#{awsui.$space-grid-gutter} * -1);
  margin-inline-end: 0;

  @for $i from 1 through 20 {
    &.list-grid-#{$i} {
      > .card {
        inline-size: math.div(100%, $i);
      }
    }
  }
}

.selection-control {
  position: absolute;
  box-sizing: border-box;
  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
  inset-block-start: 0;
  inset-inline-end: 0;
  padding-block: awsui.$space-card-vertical;
  padding-inline: awsui.$space-card-horizontal;
}

.loading,
.empty {
  overflow: hidden;
  text-align: center;
  color: awsui.$color-text-empty;
  margin-block-end: awsui.$space-scaled-l;
}

.has-header {
  // Unfortunately, we don't have access to the header of InternalContainer
  // in order to use margin-bottom instead.
  margin-block-start: awsui.$space-grid-gutter;
  &.refresh {
    &.header-variant-full-page {
      margin-block-start: awsui.$space-scaled-s;
    }
  }
}

.card {
  display: flex;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  list-style: none;
  &-inner {
    position: relative;
    background-color: awsui.$color-background-container-content;
    margin-block-start: 0;
    margin-block-end: awsui.$space-grid-gutter;
    margin-inline-start: awsui.$space-grid-gutter;
    margin-inline-end: 0;
    padding-block: awsui.$space-card-vertical;
    padding-inline: awsui.$space-card-horizontal;
    inline-size: 100%;
    min-inline-size: 0;
    @include card-style;
  }
  &-header {
    @include styles.font-heading-m;
    &-inner {
      inline-size: 100%;
      display: inline-block;
    }
  }
  &-selectable {
    > .card-inner > .card-header {
      inline-size: 90%;
    }
  }
  &-selected {
    > .card-inner {
      background-color: awsui.$color-background-item-selected;
      &::before {
        border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
        border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
      }
    }
  }
}

.section {
  display: inline-block;
  box-sizing: border-box;
  // only scale bottom padding to reduce padding between sections and after the last section.
  padding-block-start: awsui.$space-xs;
  padding-block-end: awsui.$space-scaled-xs;
  padding-inline: 0;
  vertical-align: top;
  &-header {
    @include styles.font-label;
    color: awsui.$color-text-label;
  }
  &-content {
    /* used in test-utils */
  }
}
.section:last-child {
  padding-block-start: awsui.$space-xs;
  padding-block-end: 0;
  padding-inline: 0;
}

.footer-pagination {
  display: flex;
  justify-content: flex-end;
}
